<!DOCTYPE HTML>
<html>
<head>
 <title>js实现弹出提交表单 </title>
 <meta charset="utf-8">
 <style type="text/css">
 #all_light { /*整个弹窗的页面*/
 opacity: 0.8; /*透明度*/
 width: 100%; /*宽度*/
 height: 2300px; /*高度，不能百分百*/
 background: #000; /*背景色*/
 position: absolute;
 top: 0;
 left: 0; /*定位*/
 display: none; /*隐藏*/
 z-index: 2; /*覆盖*/
 }
 #contes { /* 弹框的页面*/
 width: 500px; /*宽度*/
 height: 500px; /*高度*/
 background: #fff; /*背景色*/
 display: none; /*隐藏*/
 z-index: 2; /*覆盖*/
 position: absolute;
 top: 100px;
 left: 400px; /* 定位*/
 }
 input{
 margin-bottom: 10px;
 }
 </style>
</head>
<body>
<!-- 点击按钮 -->
<a href="javascript:void(0)" onclick="add()">
 添加
</a>
<!--  弹框的div -->
<div id="contes" style="">
 <div style="width:500px;height:40px;">
 添加用户
 <hr>
 <form style=" margin-left: 100px;">
    用户名：<input type="text" value="" name="" ><br>
    用户名：<input type="text" value="" name="" ><br>
 用户名：<input type="text" value="" name="" ><br>
 密&nbsp;&nbsp;&nbsp;码：<input type="password" value="" name=""><br>
 <input type="submit" value="提交">
 </form>
 </div>
</div>
<div id="all_light">
</div>
</body>
<script>
 function add() {
 document.getElementById('all_light');
 document.getElementById('contes').style.display = 'block';
 }
</script>
</html>